<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3153793_21vnlon8swz.css">
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f1f1f1;
        }

        ul {
            list-style: none;
        }

        .header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 10px 15px;
            line-height: 30px;
            position: fixed;
            top: 0;
            z-index: 10;
        }

        .icon-gengduo {
            font-size: 25px;
            color: #fff;
        }

        .import {
            width: 75%;
            height: 30px;
            position: relative;
        }

        .import input {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            border: none;
            text-indent: 6em;
        }

        .log-in {
            font-size: 15px;
            color: #fff;
        }

        /* 京东字体图标 */
        .icon-jingdong {
            height: 20px;
            color: red;
            font-size: 15px;
            position: absolute;
            left: 12px;
            top: 1px;
        }

        .icon-sousuo {
            color: #aaa;
            font-size: 18px;
            position: absolute;
            left: 50px;
            top: 1px;
        }

        .icon-vertical_line {
            color: #aaa;
            font-size: 20px;
            position: absolute;
            left: 32px;
            top: 1px;
        }

        .banner {
            width: 100%;
            height: 200px;
            background-image: url(./imgs/header-background.png);
            background-size: 100% 200px;
            background-repeat: no-repeat;
            padding-top: 60px;
        }

        /* 轮播图 */
        .swiper {
            width: 90%;
            height: 100%;
            border-radius: 20px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        main {
            width: 100%;
            height: 300px;
            padding: 0 10px;
        }

        main .title {
            width: 100%;
            display: flex;
        }

        main .title img {
            width: 33%;
        }

        .nav {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding: 0 5px;
            justify-content: space-around;
        }

        .nav li {
            width: 18%;
            text-align: center;
            margin-bottom: 20px;
        }

        .nav li img {
            width: 80%;
        }

        .nav li p {
            font-size: 10px;
        }

        .seckill {
            width: 100%;
            height: 245px;
            background-color: #fff;
            border-radius: 15px;
            padding: 15px 10px;
        }

        .seckill .seckill-title::after {
            content: "";
            display: inline-block;
            width: 21px;
            height: 18px;
            background-image: url(./imgs/秒杀.png);
            background-size: 100%;
        }

        .seckill .seckill-title span:nth-child(2) {
            font-size: 15px;
            color: #ff2727;
            margin-left: 10px;
        }

        .seckill .comd {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .detail {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 15px 0;
            padding-bottom: 60px;
        }

        .detail div {
            padding: 10px;
            width: 48%;
            background-color: #fff;
            margin-bottom: 20px;
        }

        .detail div img {
            width: 100%;
        }

        footer {
            width: 100%;
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            position: fixed;
            bottom: 0;
        }

        footer img {
            width: 20%;
        }
    </style>
</head>

<body>
    <div class="header">
        <span class="iconfont icon-gengduo"></span>
        <div class="import">
            <input type="text" placeholder="平板电脑">
            <span class="iconfont icon-jingdong"></span>
            <!-- 竖线 -->
            <span class="iconfont icon-vertical_line"></span>
            <span class="iconfont icon-sousuo"></span>
        </div>
        <span class="log-in">登录</span>
    </div>
    <div class="banner">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
                <div class="swiper-slide"><img src="./imgs/banner.jpg"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <main>
        <div class="title">
            <img src="./imgs/动1.png">
            <img src="./imgs/动图.gif">
            <img src="./imgs/动3.png">
        </div>
        <ul class="nav">
            <li>
                <img src="./imgs/iteam-1.png">
                <p>京东超市</p>
            </li>
            <li>
                <img src="./imgs/iteam-2.png">
                <p>数码电器</p>
            </li>
            <li>
                <img src="./imgs/iteam-3.png">
                <p>京东服饰</p>
            </li>
            <li>
                <img src="./imgs/iteam-4.png">
                <p>京东生鲜</p>
            </li>
            <li>
                <img src="./imgs/iteam-5.png">
                <p>京东到家</p>
            </li>
            <li>
                <img src="./imgs/iteam-6.png">
                <p>充值缴费</p>
            </li>
            <li>
                <img src="./imgs/iteam-7.png">
                <p>物流查询</p>
            </li>
            <li>
                <img src="./imgs/iteam-8.png">
                <p>领卷</p>
            </li>
            <li>
                <img src="./imgs/iteam-9.png">
                <p>领金贴</p>
            </li>
            <li>
                <img src="./imgs/iteam-10.png">
                <p>PLUS会员</p>
            </li>
        </ul>
        <div class="seckill">
            <div class="seckill-title"><span>京东秒杀</span><span>16</span></div>
            <div class="comd">
                <img src="./imgs/imit-1.png">
                <img src="./imgs/imit-2.png">
            </div>
        </div>
        <div class="detail">
            <div>
                <img src="./imgs/mian-1.png">
                <p>商品1</p>
                <span>2999</span>
                <i>5w+评论</i>
            </div>
            <div>
                <img src="./imgs/mian-2.png">
                <p>商品2</p>
                <span>1999</span>
                <i>5w+评论</i>
            </div>
            <div>
                <img src="./imgs/mian-3.png">
                <p>商品3</p>
                <span>888</span>
                <i>5w+评论</i>
            </div>
            <div>
                <img src="./imgs/main-4.png">
                <p>商品4</p>
                <span>3888</span>
                <i>5w+评论</i>
            </div>
        </div>
    </main>
    <footer>
        <img src="./imgs/footer-1.png">
        <img src="./imgs/footer-2-c.png">
        <img src="./imgs/footer-3-c.png">
        <img src="./imgs/footer-4-c.png">
        <img src="./imgs/footer-5-c.png">
    </footer>
    <script src="./lib/swiper-bundle.min.js"></script>
    <script>
        //banner轮播图
        function banner() {
            var swiper = new Swiper(".mySwiper", {
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        }
        banner()


        //顶部滚动背景颜色
        function Top() {
            let header = document.querySelector(".header")
            window.addEventListener("scroll", function () {
                if (document.documentElement.scrollTop == 0) {
                    header.style.backgroundColor = "transparent"
                } else {
                    header.style.backgroundColor = "red"
                }
            }
            )
        }
        Top()
    </script>
</body>
</html>